<template>
  <div class="home">
    <el-container>
      <el-header style="height:120px">
        <div id="top">
          <div id="logo">人事管理系统</div>
          <div id="welcome">
          {{}}欢迎登录！
        </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 菜单栏组件 -->
          <menus></menus>
        </el-aside>
          <el-main>
            <!-- 面包屑 -->
            <breadcrumb></breadcrumb>
            <!-- 二级路由出口 -->
            <router-view id="rbac"></router-view>
          </el-main>
      </el-container>
      <!-- <el-footer style="height:120px">Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import menus from "@/components/System/menus.vue";
import breadcrumb from "@/components/System/breadcrumb.vue";
export default {
  name: "HomeView",
  components: {
    HelloWorld,
    menus,
    breadcrumb
  },
};
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 400px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  #top{
    clear: both;
    height: 80px;
    text-align: center;
    display: flex;
  }
  #top #logo{
    color:#fff;
    font-size: 30px;
    font-weight: bold;
    padding: 15px 0 0 40px;
  }
  #logo{
    margin: auto;
  }
  #welcome{
    margin-top: 30px;
  }
  #rbac{
    margin-top: 15px;
  }
</style>